<template>
  <div class="chart-container">
    <!-- 加载动画，加载完成后显示图表 -->
    <a-spin class="chart-view">
      <template v-if="chartInfo.echartsOption?.series?.length > 0">
        <div class="echart-wapper">
          <CutomChart ref="chartRef" :options="chartInfo.echartsOption" />
        </div>
        <div class="total-wapper" v-if="chartInfo.singleRightList?.length">
          <CategoryTotal class="category-total" :data="chartInfo.singleRightList" :type="totalType" />
        </div>
      </template>
      <a-empty v-else />
    </a-spin>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { getChartInfo } from '../../../apis/home-pv'
import {handlePreConfigChart } from '../../../utils/charts'
import CategoryTotal from './category-total.vue'
import CutomChart from '../../../components/custom-chart/index.vue'

// 定义图表信息的接口
interface IChartInfo {
  cardName: string
  echartsOption: any
  singleInfo: null | any
  singleRightList: Array<any>
}

// 定义组件接收的属性
const props = defineProps({
  public: {
    type: Object,
    default: () => ({})
  },
  configType: {
    type: Number,
    default: 1
  },
  // 设备编号
  deviceSn: {
    type: String,
    default: ''
  },
  totalType: {
    type: Number,
    default: 2
  },
  pageTemplate: {
    type: [String, Number],
    default: '1'
  },
  isDownload: {
    type: Boolean,
    default: false
  }
})
const chartInfo = ref<IChartInfo>({
  cardName: '',
  echartsOption: {
    series: []
  },
  singleInfo: null,
  singleRightList: []
})


// 数据获取函数
const fetchData = async () => {
  if (!props.public.cardKey || !props.public.dashboardConfigId) {
    return
  }
  try {
    // setLoading(true);
    const params = {
      configId: props.public.dashboardConfigId,
      cardKey: props.public.cardKey,
    }

    const res = await getChartInfo(params)
    if (res.data.code === 200) {
      chartInfo.value = {
        ...res.data.data,
        echartsOption: handlePreConfigChart(res.data.data.echartsOption, '', res.data.data.chartType)
      }
    } else {
      chartInfo.value = {
        cardName: '',
        echartsOption: {},
        singleInfo: null
      }
    }
  } catch (error) {
    console.error('获取图表数据时出错:', error)
  } finally {
    // setLoading(false);
  }
}

const chartRef = ref<any>(null)


onMounted(async () => {
  if(props.configType !== 1){
    fetchData();
  }
  // await fetchData()
})


</script>

<style scoped lang="less">
.chart-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;

  .download-icon {
    position: absolute;
    color: #ffffff;
    cursor: pointer;
    z-index: 999999;
  }

  .time-search {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    z-index: 11;
  }

  .chart-view {
    width: 100%;
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    padding: 0 10px;
    box-sizing: border-box;

    .echart-wapper {
      flex: 1;
      height: 100%;
    }

    .total-wapper {
      width: 30%;
      height: 100%;
    }
  }

  .arco-empty {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
}
</style>
